<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
    <title>下单</title>
    <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css">
    <link rel="stylesheet" href="//cdn.bootcss.com/weui/0.4.3/style/weui.min.css">
    <link rel="stylesheet" href="//cdn.bootcss.com/jquery-weui/0.8.0/css/jquery-weui.min.css">
    <link rel="stylesheet" href="config/css/bootstrap.css">
    <link rel="stylesheet" type="text/css" href="config/css/weui.min.css">
    <link rel="stylesheet" type="text/css" href="config/css/base.css">
    <link rel="stylesheet" type="text/css" href="config/css/common.css">
    <link rel="stylesheet" type="text/css" href="css/page.css">
    <link rel="stylesheet" type="text/css" href="config/css/star/star-rating.css" media="all"/>
</head>
<body class="bgcolor">
<div class="con-box">
    <div class="dp-introbule">
        <div class="dp-introbule-box">
            <ul>
                <li class="dp-img"><img src="image/dpsmall.png"></li>
                <li class="dp-content">
                    <ul class="dp-content-ul" style="clear: both; overflow: hidden">
                        <li><img src="image/rz-log.png" style="width:28px; height: 18px; margin-bottom: 3px">
                            <span class="f16 blackcolor" style=" display:inline-block;height: 26px; line-height: 26px ">杭州雷凌汽车服务店</span>
                        </li>
                        <li>
                            <input disabled id="input-21e" value="5" type="number" class="rating" min=0 max=5 step=0.5
                                   data-size="xs">
                        </li>
                        <li>
                            <span class="dp-instance">距离您3.5公里，古墩路300号</span>
                        </li>
                    </ul>
                </li>
                <li class="dp-phone">
                    <div style="padding-top: 30px; ">
                        <img src="image/customer-map.png" style="width: 34px; height:34px; line-height: 34px;margin-left: 10px;">
                        <a href="tel:18601613368"><img src="image/customer-phone.png" style="width: 34px; height:34px; line-height: 34px; margin-left: 10px;"></a>
                    </div>
                </li>

            </ul>
        </div>
    </div>
    <div class="price-list">
        <div class="service-option">
            <ul>
                <li class="service-option-img"><img src="image/Rectangle%2029.png"></li>
                <li class="service-option-content f16 blackcolor">全程可视化空调清洗服务</li>
                <li class="service-option-price f18 printcolor">&yen 349.00
                    <img src="image/more.png" class="more-photo">
                </li>
            </ul>
        </div>
        <div class="discount-option">
            <ul>
                <li class="discount-option-img"><img src="image/Shape.png"></li>
                <li class="discount-option-content f14 blackcolor">优惠券</li>
                <li class="discount-option-price f14 graycolor"> &yen 50.00
                    <img src="image/more.png" class="more-photo">
                </li>
            </ul>
        </div>
    </div>
    <div class="clean-process">
        <ul>
            <li>
                <p><img src="image/Oval%20377.png"><span class="pl10 graycolor f12">全程可视化清洗服务</span></p>
                <div class="left-border-div"></div>
            </li>
            <li>
                <p><img src="image/Oval%20377.png"><span class="pl10 graycolor f12">医用级清洗，消毒剂，全车消毒每一次清洗长久健康</span></p>
                <div class="left-border-div"></div>
            </li>
            <li>
                <p><img src="image/Oval%20377.png"><span class="pl10 graycolor f12">专业细致服务，免费空调工况检测</span></p>
            </li>
        </ul>
    </div>

    <div class="car-list">
        <div class="car-list-content">
            <ul id="addmycar">
                <li class="cartype-title graycolor">车牌号</li>
                <li class="cartype-content">

                    <p class="f14 mt10 cartype-content-detail">沪C 09AQ7</p>
                    <p class="f12 graycolor cartype-content-detail">大众帕萨特2015款</p>

                </li>
                <li class="more-caretype">
                    <img src="image/more.png" class="more-photo">
                </li>
            </ul>
            <ul id="cartype-date">
                <li class="cartype-title graycolor">预约时间</li>
                <li class="cartype-content">
                    <span class="f14 cartype-detail-time "><input type="text" id='datetime-picker' style="color: #959595; background:#fff; border: none; font-size: 14px; "></span>

                </li>
                <li class="more-caretype">
                    <img src="image/more.png" class="more-photo">
                </li>
            </ul>
        </div>
    </div>
    <div class="place-an-order">
        <span class="f16" >立即下单</span>
    </div>
   <!--未填写车牌号弹出框-->

</div>
<!--未填车牌号弹出框-->
<div id="dialog1" style="display: none">
    <div class="weui-mask"></div>
    <div class="weui-dialog">
        <div class="weui-dialog__hd"><strong class="weui-dialog__title">车牌号提醒</strong></div>
        <div class="weui-dialog__bd">您尚未填写车牌号，下单成功后，接单人员会电话与您沟通获取您的车牌号，谢谢</div>
        <div class="weui-dialog__ft">
            <a href="javascript:void(0);" class="weui-dialog__btn weui-dialog__btn_default">取消</a>
            <a href="javascript:void(0);" class="weui-dialog__btn weui-dialog__btn_primary">确定</a>
        </div>
    </div>
</div>
</body>
<script src="config/js/jquery-2.1.4.min.js"></script>
<script src="config/js/star/star-rating.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
<script src="config/js/weui.min.js"></script>
<script src="config/js/jquery-weui.min.js"></script>
<script>
    $(function () {
        $('#myModal').modal({
            keyboard: true
        });

        function p(s) {
            return s < 10 ? '0' + s: s;
        }

        var myDate = new Date();
        //获取当前年
        var year=myDate.getFullYear();
        //获取当前月
        var month=myDate.getMonth()+1;
        //获取当前日
        var date=myDate.getDate();
        var h=myDate.getHours();       //获取当前小时数(0-23)
        var m=myDate.getMinutes();     //获取当前分钟数(0-59)
        var s=myDate.getSeconds();

        var now=year+'-'+p(month)+"-"+p(date)+" "+p(h)+':'+p(m);
        $('#datetime-picker').val(now);//设置默认时间
    });


    $("#datetime-picker").datetimePicker();
</script>
<script>
    $(document).ready(function(){
        var screenWidth = $(window).width();//获取屏幕可视区域的宽度。
        $(".place-an-order").width(screenWidth);//将宽度赋值给bottomDiv使其可以贯穿整个屏幕。
        var screenHeight = $(window).height();//获取屏幕可视区域的高度。
        var divHeight = $(".place-an-order").height() + 1;//bottomDiv的高度再加上它一像素的边框。

        $(window).scroll(function(){
            var scrollHeight = $(document).scrollTop();//获取滚动条滚动的高度。
            if(!window.XMLHttpRequest){
                $(".place-an-order").css("top",screenHeight + scrollHeight - divHeight);
            }//判断是否为IE6，如果是，执行大括号中内容
        });

        $(".dp-content-ul").click(function () {
            window.location.href = 'shopInformation.html';//跳转至店铺首页
        });
        $(".service-option").click(function () {
            window.location.href = 'serviceDetails.html';//跳转至服务页
        });
        $(".discount-option").click(function () {
            window.location.href = 'discountDetails.html';//跳转至我的优惠券
        });
        $("#addmycar").click(function () {
            window.location.href = 'myCars.html';//跳转至我的车辆
        });
        $(".place-an-order").click(function () {
            $('#dialog1').show();//若未填写，弹出框提示框
        });
        $('.weui-dialog__btn_default').click(function () {
            $('#dialog1').hide();//点击取消，弹出框关闭，重新输入车牌号
        });
        $('.weui-dialog__btn_primary').click(function () {
            window.location.href = 'orderList.html';//点击确认不填写车牌号，跳转至我的订单
        })
    })
</script>
</html>